<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box">
    <span>hello1</span>
    <span>hello2</span>
    <span class="three">hello3</span>
  </div>
</body>
<script>

  var box = document.querySelector(".box")
  var three = document.querySelector(".three")

  // 增

  // 创建元素
  var p = document.createElement("p");
  // 插入元素
  // box.appendChild( p );
  box.insertBefore( p, three )

  // p.innerHTML = "段落";
  // p.style.background = "red";
  // p.onclick = function(){
  //   console.log(1);
  // }


  // 删

  // 删除自身
  // box.remove();
  // 通过父元素删除指定子元素
  // document.body.removeChild( box );


  // 改：
  // console.log(box.outerHTML)
  // box.outerHTML = "<em>"+ box.innerHTML +"</em>";

  // var i = document.createElement("i");
  // i.innerHTML = three.innerHTML;
  // i.className = three.className;
  // box.replaceChild(i, three);


  // 克隆：需要配合插入操作
  var box2 = box.cloneNode( true );
  console.log(box2)

  document.body.appendChild(box2);


  var world = document.createTextNode("world")
  p.appendChild(world);

  // p.innerHTML = "world";


</script>
</html>